<template>
    <div class="layout">
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-right="onClickRight">
            <template #left>
                <van-icon name="setting" color="#ee7c63" />
            </template>
            <template #title>
                <van-tabs v-model:active="active" animated @click-tab="onClickTab" :lazy-render="false">
                    <van-tab v-for="index in itemList" :title="index.item" :key="index.id" >
                        <!-- 内容 {{ index }} -->
                    </van-tab>
                </van-tabs>

            </template>
            <template #right>
                <van-icon name="search" size="18" color="#ee7c63" />
            </template>
        </van-nav-bar>
        <slot></slot>
        <div class="fmPlay"  >
            <van-popup
                position="bottom"
                v-model:show="isShow"
                :style="{ height: '100%'}"
            >
               <Audio @closeEvt="closePop"></Audio>
            </van-popup>
            <div class="mask" @click="showPopup"></div>
            <van-card
                :desc="curFM?.anchors"
                :title="curFM?.title"
                :thumb="curFM?.img"
                >
                <template #tags>
                    <div class="icon">
                        <van-icon name="arrow" size="30" color="#7e868f" @click="nextFM" />
                        <van-icon name="audio" size="30" color="#7e868f" />
                    </div>
                </template>
            </van-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, watch,onMounted,computed} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import func from '../../vue-temp/vue-editor-bridge';
// import func from '../../vue-temp/vue-editor-bridge'
import ajax from '../apis/Ajax';
import Audio from '../pages/heart/Audio.vue'
import useCommonStore  from '../store/common';

const itemList:any = ref([])
const active:any = ref(1)

const router = useRouter()
const route = useRoute()
const store = useCommonStore()

let id:any = computed(()=>{
    return store.rid
})


const curFM:any = ref([])
// const show:any = ref(false)

// console.log(localStorage.getItem('id'))

itemList.value = [
    {id:1,item:'我的',path:'/mine'},
    {id:2,item:'心理FM',path:'/heart'},
    {id:3,item:'发现',path:'/find'},
]

function showPopup(){
    store.isShow = true
}

function closePop(){
    store.isShow = false
}

function onClickTab({name}:any){    
   router.push(itemList.value[name].path)
}

function onClickRight(){
    router.push('/search')
}

function nextFM(){
    if (id.value == 5) {
        store.rid = 0
    }else {
        store.rid ++
    }
     
    store.id = id.value
}


    

let isShow = computed(()=>{
    return store.isShow
})

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    active.value = itemList.value.findIndex((it:any)=>{
        return it.path == newValue.fullPath
    })
  },
  { immediate: true }
)

watch(
    id,
    function(val:any){
        // console.log(val)
        ajax({
        url:'/recDetail',
        params:{
          id:val
        }
      }).then(({data})=>{
        // console.log(data.rows)
        curFM.value = data.rows
      })
    },
    { immediate: true }
)

</script>

<style lang="less" scoped>
@import '../styles/common.less';

.layout {
    .van-nav-bar {
        // visibility: visible;
        position: sticky;
        top: 0;
        .van-nav-bar__content {
            // padding-top: 18px;
        }
    }
    overflow-x: hidden;
    .rel();
    .fmPlay {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        .mask{
            width: 70%;
            height: 100%;
            // background-color: pink;
            position: absolute;
            left: 0;
            z-index: 999;
        }
        .van-card {
            background-color: #f3f4f5;
        }
        ::v-deep(.van-card__title) {
            font-size: 1.6rem;
            font-weight: 500;
            margin-bottom: 1rem;
            margin-top: 0.8rem;
        }
        ::v-deep(.van-card__desc) {
            font-size: 1.4rem;
        }
        .icon {
            position: absolute;
            right: 1rem;
            bottom: 1.2rem;
            .van-icon {
                margin-left: 0.75rem;
            }
            .btn1 {
                width: 30px;
                height: 30px;
                position: absolute;
                left: 1px;
                background-color: pink;
                z-index: 999;
            }
        }
        ::v-deep(.van-image) {
            border-radius: 50%;
            overflow: hidden;
        }
        ::v-deep(.van-card__thumb) {
            width: 70px;
            height: 70px;
        }
    }
}
</style>